<template>
	<view class="total">
		<view class="bigbox">
			<view class="name">
				姓名
			</view>
			<view class="eid">
				工号
			</view>
			<view class="checktime">
				打卡时间 
			</view>
		</view>
		<view class="box" v-for="item in card" :key="index">
			<view class="name">
				{{item.employee_name}}
			</view>
			<view class="eid">
				{{item.employee_id}}
			</view>
			<view class="checktime">
				{{item.checktime}} 
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import { postclockrecord } from "@/api/api.js"
	export default{
		data(){
			return{
				// 打卡数组
				card:[]
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods:{
			handleClock() {
				postclockrecord(this.userInfo.employee_id)
					.then(response => {
						console.log(response);
						if (response.length>0) {
							this.card = response;
							console.log(this.card);
						} else {
							uni.showModal({
								title: '暂无打卡记录',
								showCancel: false
							});
						}
					})
					.catch(error => {
						console.log(error);
					});
			}
		},
		mounted() {
			this.handleClock();
		},
	}
</script>
	
<style lang="scss" scoped>
	.bigbox{
		display: flex;
		justify-content: space-between;
		padding: 20upx 0;
		border-bottom: 1px solid darkgray;
	}
	.box{
		display: flex;
		justify-content: space-between;
		padding: 20upx 0;
		border-bottom: 1px dashed darkgray;
	}
</style>